// 解构 React Hoods
import React, { useState } from "react";

// 一个函数 返回一段jsx
const App = () => {
  // let name = '泓';
  // state 状态
  // useState 给当前组件添加一个状态 默认值 是个数组
  // 解构 useState 第一个 date 变量，第二个setDate函数。当第二个生效，通知{date}
  let [name, setName] = useState('泓');// 给JSX带来一个状态
  let [isSingle, setIsSingle] = useState(true);
  let [date, setDate] = useState(new Date().toLocaleTimeString())

  // JSX {} 占位符 输出值、js运行区域 结果默认输出

  setInterval(() => {
    setDate(new Date().toLocaleTimeString())
  }, 1000)

  const changeName = () => {
    // console.log('English Name');
    setName('Cavan');
    setIsSingle(false);
  }

  const friends = [{
    name: '娴',
    age: 21
  },
  {
    name: '奕',
    age: 20
  }];

  return (
    <div>
      <p>{isSingle ? <span>单身</span> : <span>有主</span>}</p>
      <h1>hello {name}</h1>
      <h2>现在是 {date}</h2>
      <button onClick={changeName}>显示英文名</button>
      <ul>
        {
          friends.map((friend, index) => <li key={index}>{friend.name}--{friend.age}</li>)
        }
      </ul>
      <p>JSX 简单 高效的 UI模板 状态...</p>
    </div >
  )
}
export default App;